<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>会员详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button size="small" type="success" @click="giveCoupon">
                                    发优惠券
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="modifyPointsDialogVisible = true">
                                    积分调整
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="modifyBalanceDialogVisible = true">
                                    余额调整
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="success" @click="consumeDialogVisible = true">
                                    消费积分
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="danger" @click="deleteMember">
                                    删除
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="10" border size="small">
                <el-descriptions-item label="姓名">
                    {{ memberInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    {{ memberInfo.gender }}
                </el-descriptions-item>
                <el-descriptions-item label="历史消费金额">
                    {{ memberInfo.historyConsumeAmt }}
                </el-descriptions-item>
                <el-descriptions-item label="余额">
                    {{ memberInfo.balance }}
                </el-descriptions-item>
                <el-descriptions-item label="充值帐户余额">
                    {{ memberInfo.rechargeBalance }}
                </el-descriptions-item>
                <el-descriptions-item label="赠送帐户余额">
                    {{ memberInfo.giveBalance }}
                </el-descriptions-item>
                <el-descriptions-item label="积分">
                    {{ memberInfo.points }}
                </el-descriptions-item>
                <el-descriptions-item label="积分清零日期">
                    {{ memberInfo.pointsClearDate }}
                </el-descriptions-item>
                <el-descriptions-item label="等级">
                    {{ memberInfo.levelName }}
                </el-descriptions-item>
                <el-descriptions-item label="升级日期">
                    {{ memberInfo.levelUpDate }}
                </el-descriptions-item>
                <el-descriptions-item label="等级循环日期">
                    {{ memberInfo.levelCycleDate }}
                </el-descriptions-item>
                <el-descriptions-item label="等级期内消费金额">
                    {{ memberInfo.levelConsumeAmt }}
                </el-descriptions-item>
                <el-descriptions-item label="生日">
                    {{ memberInfo.birthday }}
                </el-descriptions-item>
                <el-descriptions-item label="管理员">
                    <el-switch
                        v-model="memberInfo.adminFlag"
                        @change="changeAdminFlag"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="加入时间">
                    {{ memberInfo.joinTime }}
                </el-descriptions-item>
                <el-descriptions-item label="加入渠道">
                    {{ memberInfo.outerStr }}
                </el-descriptions-item>
                <el-descriptions-item label="头像">
                    <div>
                        <el-image
                            style="width: 80px; height: 80px"
                            :src="memberInfo.avatar"></el-image>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" direction="vertical" :column="1" border size="small">
                <el-descriptions-item label="渠道信息">
                    <el-table
                        id="mainTable"
                        :data="memberInfo.openIdInfos"
                        border
                        size="mini"
                        header-cell-class-name="tableHeaderStyle"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="appId" label="APP_ID"></el-table-column>
                        <el-table-column prop="appName" label="APP_NAME"></el-table-column>
                        <el-table-column prop="openId" label="OPEN_ID"></el-table-column>
                        <el-table-column prop="unionId" label="UNIO_ID"></el-table-column>
                        <el-table-column prop="accountType" label="类型"
                                         :formatter="formatAccountType"></el-table-column>
                    </el-table>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>优惠券</span>
            </div>
            <el-table :data="myCoupons" size="small" header-cell-class-name="tableHeaderStyle">
                <el-table-column prop="couponInfo.type" :formatter="formatType" label="券类型"
                                 width="80px"></el-table-column>
                <el-table-column prop="couponInfo.title" label="标题" width="120"></el-table-column>
                <el-table-column prop="code" label="券码" width="80px"></el-table-column>
                <el-table-column prop="status" :formatter="formatStatus" label="状态" width="80px"></el-table-column>
                <el-table-column prop="source" :formatter="formatSource" label="来源" width="80px"></el-table-column>
                <el-table-column prop="sourceRemark" label="来源备注"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="expiryTime" label="过期时间"></el-table-column>
                <el-table-column prop="couponInfo.description" label="使用说明"></el-table-column>
                <el-table-column prop="verifyTime" label="验证时间"></el-table-column>
                <el-table-column prop="verifyBy" label="验证人"></el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    align="center"
                    width="60px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="verifyCoupon(scope.row)" type="text" size="small">
                                验券
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>余额明细</span>
                    </div>
                    <balance-transaction ref="balanceTransaction" size="small" :member-id="id"></balance-transaction>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>积分明细</span>
                    </div>
                    <points-transaction ref="pointsTransaction" size="small" :member-id="id"></points-transaction>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="积分调整" width="30%" :visible.sync="modifyPointsDialogVisible">
            <el-form :model="modifyPointsForm" label-width="120px" size="small">
                <el-form-item label="积分">
                    <el-input v-model="modifyPointsForm.points" placeholder="发生积分"></el-input>
                    <div class="form-tips">
                        增加填写正数，减少填写负数
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="modifyPointsForm.remark" placeholder="备注" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyPointsDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="modifyPointsConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="余额调整" width="30%" :visible.sync="modifyBalanceDialogVisible">
            <el-form :model="modifyBalanceForm" label-width="120px" size="small">
                <el-form-item label="调整充值帐户">
                    <el-input v-model="modifyBalanceForm.rechargeAmt" placeholder="请输入金额"></el-input>
                    <div class="form-tips">
                        增加填写正数，减少填写负数
                    </div>
                </el-form-item>
                <el-form-item label="调整赠送帐户">
                    <el-input v-model="modifyBalanceForm.giveAmt" placeholder="请输入金额"></el-input>
                    <div class="form-tips">
                        增加填写正数，减少填写负数
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="modifyBalanceForm.remark" placeholder="备注" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyBalanceDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="modifyBalanceConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="消费积分" width="30%" :visible.sync="consumeDialogVisible">
            <el-form :model="consumeForm" label-width="120px" size="small">
                <el-form-item label="选择门店">
                    <el-select v-model="consumeForm.shopId" placeholder="请选择门店" style="width:200px;">
                        <el-option
                            v-for="item in shops"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="消费金额">
                    <el-input v-model="consumeForm.consumeAmt" placeholder="消费金额"></el-input>
                    <div class="form-tips">
                        请填写实际的消费金额，系统会根据该金额会重新计算会员等级，此操作不可撤回！
                    </div>
                </el-form-item>
                <el-form-item label="消费时间">
                    <el-date-picker
                        v-model="consumeForm.consumeTime"
                        type="datetime"
                        placeholder="消费时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否积分">
                    <el-switch v-model="consumeForm.pointsFlag"></el-switch>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="consumeForm.remark" placeholder="备注" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="consumeDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="consumeConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择优惠券" :visible.sync="giveCouponDialogVisible">
            <el-table :data="couponList" size="small" header-cell-class-name="tableHeaderStyle">
                <el-table-column prop="type" :formatter="formatType" label="券类型"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="description" label="使用说明"></el-table-column>
                <el-table-column prop="remainQuantity" label="剩余数量"></el-table-column>
                <el-table-column prop="expiryTime" label="过期时间"></el-table-column>
                <el-table-column prop="status" :formatter="formatCouponStatus" label="状态"></el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="80px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="giveCouponConfirm(scope.row)" type="text" size="small">
                                选择
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="giveCouponDialogVisible = false" size="small">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    adjustMemberBalance,
    adjustMemberPoints,
    deleteMember,
    getCouponByPage,
    getMemberById,
    getMemberCoupons,
    getShopByPage,
    giveMemberCoupon,
    memberConsume,
    setAdmin,
    verifyCouponById
} from '@/api/api'
import PointsTransaction from "@/component/PointsTransaction";
import BalanceTransaction from "@/component/BalanceTransaction";
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "MemberDetail",
    components: {PointsTransaction, BalanceTransaction, TablePopover},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 门店数据
            shops: [],

            // 会员详情
            memberInfo: {},
            // 会员ID
            id: '',

            modifyPointsDialogVisible: false,
            modifyPointsForm: {},

            modifyBalanceDialogVisible: false,
            modifyBalanceForm: {
                rechargeAmt: 0,
                giveAmt: 0,
            },

            giveCouponDialogVisible: false,
            giveCouponForm: {},

            consumeDialogVisible: false,
            consumeForm: {
                pointsFlag: true,
            },

            // 优惠券列表
            couponList: [],
            // 我的优惠券
            myCoupons: [],
        }
    },
    methods: {
        formatAccountType: function (row, column, cellValue) {
            if (cellValue == 'OFFICIAL_ACCOUNT') {
                return "公众号";
            } else if (cellValue == 'MINI_PROGRAM') {
                return "小程序";
            } else {
                return "未知";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == 'GIFT') {
                return "兑换券";
            } else if (cellValue == 'DISCOUNT') {
                return "折扣券";
            } else if (cellValue == 'GENERAL') {
                return "优惠券";
            } else {
                return cellValue;
            }
        },
        formatCouponStatus: function (row, column, cellValue) {
            if (cellValue == 'AUDIT_SUCCEEDED') {
                return "审核成功";
            } else if (cellValue == 'NORMAL') {
                return "正常";
            } else if (cellValue == 'EXPIRED') {
                return "已过期";
            } else {
                return cellValue;
            }
        },
        formatSource: function (row, column, cellValue) {
            if (cellValue == 'SYSTEM') {
                return "系统派发";
            } else if (cellValue == 'MANUAL') {
                return "手工派发";
            } else if (cellValue == 'ACTIVITY') {
                return "活动派发";
            } else if (cellValue == 'MARKETING') {
                return "智能发券";
            } else {
                return "未知";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == 'UNUSED') {
                return "未使用";
            } else if (cellValue == 'USED') {
                return "已使用";
            } else if (cellValue == 'EXPIRED') {
                return "已过期";
            } else {
                return "未知";
            }
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        // 设置管理员标识
        changeAdminFlag(val) {
            setAdmin({"id": this.id}).then(res => {
                this.getData();
            })
        },
        // 发优惠券
        giveCoupon() {
            this.giveCouponDialogVisible = true;
            let condition = {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            };
            getCouponByPage(condition).then(data => {
                this.couponList = data.body.rows;
            });
        },
        // 发优惠券确认
        giveCouponConfirm(row) {
            this.giveCouponDialogVisible = false;
            this.giveCouponForm.couponId = row.id;
            this.giveCouponForm.memberId = this.id;
            this.$confirm('请确认是否发放, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                giveMemberCoupon(this.giveCouponForm).then(res => {
                    if (res.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '发放优惠券成功!'
                        });
                        this.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 验证优惠券
        verifyCoupon(row) {
            this.$confirm('请确认是否验证, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                verifyCouponById({couponRecordId: row.id}).then(res => {
                    if (res.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '验证成功!'
                        });
                        this.getData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        modifyPointsConfirm() {
            this.modifyPointsForm.memberId = this.id;
            adjustMemberPoints(this.modifyPointsForm).then(res => {
                if (res.respCode == 1000) {
                    this.$refs.pointsTransaction.getData();
                    this.getData();
                    this.modifyPointsDialogVisible = false;
                }
            })
        },
        modifyBalanceConfirm() {
            this.modifyBalanceForm.memberId = this.id;
            adjustMemberBalance(this.modifyBalanceForm).then(res => {
                if (res.respCode == 1000) {
                    this.$refs.balanceTransaction.getData();
                    this.getData();
                    this.modifyBalanceDialogVisible = false;
                }
            })
        },
        consumeConfirm() {
            this.consumeForm.memberId = this.id;
            memberConsume(this.consumeForm).then(res => {
                if (res.respCode == 1000) {
                    this.$refs.pointsTransaction.getData();
                    this.getData();
                    this.consumeDialogVisible = false;
                }
            })
        },
        deleteMember() {
            this.$confirm('该操作高危，会清除跟该会员相关的一切信息, 且不可恢复，请确认是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMember({id: this.id}).then(data => {
                    if (data.respCode == '1000') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.goBack();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 获取表格数据
        getData: function () {
            getMemberById({"id": this.id}).then(data => {
                this.memberInfo = data.body;
            });
            this.getMyCoupons();
            this.getShops();
        },
        getMyCoupons: function () {
            getMemberCoupons({"memberId": this.id}).then(res => {
                this.myCoupons = res.body
            })
        },
        // 获取门店列表
        getShops: function () {
            let condition = {
                page: 1,
                rows: 100,
                search: {}
            };
            getShopByPage(condition).then(data => {
                this.shops = data.body.rows;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
